<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Chart, registerables } from 'chart.js'

// 注册Chart.js组件
Chart.register(...registerables)

// 时间范围过滤器
const timeRangeFilter = ref('all')

// 插件类别过滤器
const categoryFilter = ref('category')

// 下载趋势数据
const downloadTrendData = reactive({
  week: {
    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    downloads: [120, 150, 180, 200, 160, 140, 130],
    growth: [5, 8, 12, 15, 10, 7, 6],
    dateRange: '本周数据'
  },
  month: {
    labels: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
    downloads: [150, 180, 220, 250, 280, 300, 320],
    growth: [8, 12, 15, 18, 20, 22, 25],
    dateRange: '本月数据'
  },
  all: {
    labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
    downloads: [200, 250, 300, 350, 400, 450, 500],
    growth: [10, 15, 20, 25, 30, 35, 40],
    dateRange: '最近30天数据'
  }
})

// 插件增长趋势数据
const pluginGrowthData = reactive({
  labels: ['Q1', 'Q2', 'Q3', 'Q4', 'Q1', 'Q2'],
  data: [40, 45, 50, 60, 75, 90]
})

// 热门插件数据
const popularPlugins = reactive([
  {
    rank: 1,
    name: '数据可视化工具',
    version: 'v2.3.4',
    developer: '张三',
    downloads: '12,458',
    growth: '23%',
    icon: 'fas fa-cube'
  },
  {
    rank: 2,
    name: '代码生成器',
    version: 'v1.8.2',
    developer: '李四',
    downloads: '9,874',
    growth: '18%',
    icon: 'fas fa-code'
  },
  {
    rank: 3,
    name: 'AI助手',
    version: 'v3.1.0',
    developer: '王五',
    downloads: '7,652',
    growth: '15%',
    icon: 'fas fa-robot'
  },
  {
    rank: 4,
    name: 'UI主题定制',
    version: 'v2.0.1',
    developer: '赵六',
    downloads: '6,321',
    growth: '12%',
    icon: 'fas fa-palette'
  },
  {
    rank: 5,
    name: '数据库连接器',
    version: 'v1.5.3',
    developer: '孙七',
    downloads: '5,487',
    growth: '9%',
    icon: 'fas fa-database'
  }
])

// 插件类别分布数据
const pluginCategories = reactive([
  { name: '开发工具', count: 120, percent: 35, color: '#FFB74D' },
  { name: 'UI组件', count: 85, percent: 25, color: '#FF9800' },
  { name: '数据处理', count: 68, percent: 20, color: '#FFA726' },
  { name: '其他', count: 69, percent: 20, color: '#FFCC80' }
])

// 下载量统计
const downloadStats = reactive({
  total: '87,429',
  month: '12,458',
  daily: '415',
  peak: '892',
  growth: {
    total: '23%',
    month: '18%',
    daily: '15%',
    peak: '32%'
  }
})

// 图例显示控制
const chartLegends = reactive({
  downloads: true,
  growth: true
})

// 切换时间范围过滤器
const changeTimeRange = (range: string) => {
  timeRangeFilter.value = range
  updateDownloadTrendChart()
}

// 切换图例显示
const toggleLegend = (legend: string) => {
  if (legend === 'downloads') {
    chartLegends.downloads = !chartLegends.downloads
  } else if (legend === 'growth') {
    chartLegends.growth = !chartLegends.growth
  }
  updateDownloadTrendChart()
}

// 更新下载趋势图表
let downloadTrendChart: Chart | null = null

const updateDownloadTrendChart = () => {
  if (!downloadTrendChart) return
  
  const currentData = downloadTrendData[timeRangeFilter.value as keyof typeof downloadTrendData]
  
  downloadTrendChart.data.labels = currentData.labels
  downloadTrendChart.data.datasets[0].data = currentData.downloads
  downloadTrendChart.data.datasets[0].hidden = !chartLegends.downloads
  downloadTrendChart.data.datasets[1].data = currentData.growth
  downloadTrendChart.data.datasets[1].hidden = !chartLegends.growth
  
  downloadTrendChart.update()
  
  // 更新日期范围文本
  const trendDateRange = document.getElementById('trendDateRange')
  if (trendDateRange) {
    trendDateRange.textContent = currentData.dateRange
  }
}

// 创建图表
const createCharts = () => {
  // 下载趋势图表
  const downloadCtx = document.getElementById('downloadTrendChart') as HTMLCanvasElement
  if (downloadCtx) {
    downloadTrendChart = new Chart(downloadCtx, {
      type: 'line',
      data: {
        labels: downloadTrendData.all.labels,
        datasets: [
          {
            label: '下载量',
            data: downloadTrendData.all.downloads,
            borderColor: '#FFB74D',
            backgroundColor: 'rgba(255, 183, 77, 0.4)',
            fill: true,
            tension: 0.4
          },
          {
            label: '增长率',
            data: downloadTrendData.all.growth,
            borderColor: '#4CAF50',
            backgroundColor: 'rgba(76, 175, 80, 0.4)',
            fill: true,
            tension: 0.4
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            grid: {
              display: false
            }
          },
          x: {
            grid: {
              display: false
            }
          }
        }
      }
    })
  }
  
  // 插件增长趋势图表
  const growthCtx = document.getElementById('pluginGrowthChart') as HTMLCanvasElement
  if (growthCtx) {
    new Chart(growthCtx, {
      type: 'bar',
      data: {
        labels: pluginGrowthData.labels,
        datasets: [{
          data: pluginGrowthData.data,
          backgroundColor: '#FFB74D',
          borderRadius: 4
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: false
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            display: false
          },
          x: {
            display: false
          }
        }
      }
    })
  }
}

// 组件挂载后创建图表
onMounted(() => {
  createCharts()
})
</script>

<template>
  <div id="plugin-data" class="tab-content">
    <div class="grid grid-cols-1 gap-6">
      <!-- 插件下载量卡片 -->
      <div class="rounded-lg border border-gray-200 bg-white shadow-sm p-6">
        <div class="flex items-center justify-between mb-6">
          <h2 class="text-lg font-bold text-gray-800">插件下载量</h2>
          <div class="flex space-x-2">
            <button 
              class="px-3 py-1 text-xs rounded-md"
              :class="timeRangeFilter === 'week' ? 'bg-amber-100 text-amber-500' : 'bg-gray-100 hover:bg-gray-200'"
              @click="changeTimeRange('week')"
            >本周</button>
            <button 
              class="px-3 py-1 text-xs rounded-md"
              :class="timeRangeFilter === 'month' ? 'bg-amber-100 text-amber-500' : 'bg-gray-100 hover:bg-gray-200'"
              @click="changeTimeRange('month')"
            >本月</button>
            <button 
              class="px-3 py-1 text-xs rounded-md"
              :class="timeRangeFilter === 'all' ? 'bg-amber-100 text-amber-500' : 'bg-gray-100 hover:bg-gray-200'"
              @click="changeTimeRange('all')"
            >全部</button>
          </div>
        </div>
        
        <!-- 下载趋势图表 -->
        <div class="p-6 rounded-lg border border-gray-200 bg-blue-50 shadow-sm mb-6">
          <div class="flex items-center justify-between mb-6">
            <div>
              <h3 class="text-sm font-medium text-gray-600">下载趋势</h3>
              <p class="text-xs text-gray-500 mt-1" id="trendDateRange">{{ downloadTrendData[timeRangeFilter].dateRange }}</p>
            </div>
            <div class="flex items-center space-x-4">
              <div 
                class="flex items-center cursor-pointer" 
                id="downloadsLegend"
                @click="toggleLegend('downloads')"
                :style="{ opacity: chartLegends.downloads ? '1' : '0.5' }"
              >
                <div class="w-3 h-3 bg-amber-500 rounded-full mr-2"></div>
                <span class="text-xs text-gray-600">下载量</span>
              </div>
              <div 
                class="flex items-center cursor-pointer" 
                id="growthLegend"
                @click="toggleLegend('growth')"
                :style="{ opacity: chartLegends.growth ? '1' : '0.5' }"
              >
                <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
                <span class="text-xs text-gray-600">增长率</span>
              </div>
            </div>
          </div>
          
          <div class="relative">
            <!-- 主图表 -->
            <div class="h-64">
              <canvas id="downloadTrendChart"></canvas>
            </div>
          </div>
          
          <!-- 数据统计卡片 -->
          <div class="grid grid-cols-4 gap-4 mt-6">
            <div class="p-4 rounded-lg border border-gray-200 bg-white shadow-sm">
              <div class="flex items-center justify-between mb-2">
                <span class="text-xs text-gray-500">总下载量</span>
                <i class="fas fa-download text-amber-500 text-sm"></i>
              </div>
              <p class="text-lg font-bold text-gray-800">{{ downloadStats.total }}</p>
              <div class="flex items-center mt-1">
                <span class="text-xs text-green-500 mr-1"><i class="fas fa-arrow-up"></i>{{ downloadStats.growth.total }}</span>
                <span class="text-xs text-gray-500">较上月</span>
              </div>
            </div>
            <div class="p-4 rounded-lg border border-gray-200 bg-white shadow-sm">
              <div class="flex items-center justify-between mb-2">
                <span class="text-xs text-gray-500">本月下载</span>
                <i class="fas fa-calendar-alt text-amber-500 text-sm"></i>
              </div>
              <p class="text-lg font-bold text-gray-800">{{ downloadStats.month }}</p>
              <div class="flex items-center mt-1">
                <span class="text-xs text-green-500 mr-1"><i class="fas fa-arrow-up"></i>{{ downloadStats.growth.month }}</span>
                <span class="text-xs text-gray-500">较上月</span>
              </div>
            </div>
            <div class="p-4 rounded-lg border border-gray-200 bg-white shadow-sm">
              <div class="flex items-center justify-between mb-2">
                <span class="text-xs text-gray-500">平均每日</span>
                <i class="fas fa-chart-line text-amber-500 text-sm"></i>
              </div>
              <p class="text-lg font-bold text-gray-800">{{ downloadStats.daily }}</p>
              <div class="flex items-center mt-1">
                <span class="text-xs text-green-500 mr-1"><i class="fas fa-arrow-up"></i>{{ downloadStats.growth.daily }}</span>
                <span class="text-xs text-gray-500">较上月</span>
              </div>
            </div>
            <div class="p-4 rounded-lg border border-gray-200 bg-white shadow-sm">
              <div class="flex items-center justify-between mb-2">
                <span class="text-xs text-gray-500">峰值下载</span>
                <i class="fas fa-bolt text-amber-500 text-sm"></i>
              </div>
              <p class="text-lg font-bold text-gray-800">{{ downloadStats.peak }}</p>
              <div class="flex items-center mt-1">
                <span class="text-xs text-green-500 mr-1"><i class="fas fa-arrow-up"></i>{{ downloadStats.growth.peak }}</span>
                <span class="text-xs text-gray-500">较上月</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 热门插件列表 -->
        <div>
          <div class="flex items-center justify-between mb-4">
            <h3 class="text-sm font-medium text-gray-600">热门插件排行</h3>
            <a href="#" class="text-xs text-amber-500 hover:underline">查看全部</a>
          </div>
          
          <div class="space-y-4">
            <div 
              v-for="plugin in popularPlugins" 
              :key="plugin.rank"
              class="flex items-center justify-between p-4 rounded-lg border border-gray-200 bg-yellow-50 shadow-sm"
            >
              <div class="flex items-center">
                <div 
                  :class="[
                    'flex items-center justify-center w-6 h-6 rounded-full text-white text-xs font-bold mr-3',
                    plugin.rank === 1 ? 'bg-amber-500' : 
                    plugin.rank === 2 ? 'bg-gray-300' : 
                    plugin.rank === 3 ? 'bg-yellow-600' : 
                    'bg-gray-200 text-gray-600'
                  ]"
                >{{ plugin.rank }}</div>
                <div class="w-10 h-10 rounded-md bg-amber-100 flex items-center justify-center mr-3">
                  <i :class="[plugin.icon, 'text-amber-500']"></i>
                </div>
                <div>
                  <p class="font-medium text-gray-800">{{ plugin.name }}</p>
                  <p class="text-xs text-gray-500">{{ plugin.version }} · 由 {{ plugin.developer }} 开发</p>
                </div>
              </div>
              <div class="text-right">
                <p class="font-medium text-gray-800">{{ plugin.downloads }}</p>
                <p class="text-xs text-green-500"><i class="fas fa-arrow-up mr-1"></i>{{ plugin.growth }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 插件数量卡片 -->
      <div class="rounded-lg border border-gray-200 bg-white shadow-sm p-6">
        <div class="flex items-center justify-between mb-6">
          <h2 class="text-lg font-bold text-gray-800">插件数量统计</h2>
          <select 
            v-model="categoryFilter"
            class="px-3 py-1 text-sm bg-gray-100 rounded-md border-none focus:ring-2 focus:ring-amber-500"
          >
            <option value="category">按类别</option>
            <option value="rating">按评分</option>
            <option value="updated">按更新时间</option>
          </select>
        </div>
        
        <!-- 插件类别分布 -->
        <div class="grid grid-cols-2 gap-6">
          <!-- 左侧饼图 -->
          <div class="p-5 rounded-lg border border-gray-200 bg-green-50 shadow-sm">
            <h3 class="text-sm font-medium text-gray-600 mb-4">插件类别分布</h3>
            
            <div class="flex justify-center mb-4">
              <div class="relative w-48 h-48">
                <!-- 简易饼图 - 使用SVG实现 -->
                <svg viewBox="0 0 36 36" class="w-full h-full">
                  <!-- 开发工具 35% -->
                  <path d="M18 2.0845 a 15.9155 15.9155 0 0 1 13.7897 7.9577 l -13.7897 7.9578 z" fill="#FFB74D"></path>
                  <!-- UI组件 25% -->
                  <path d="M31.7897 10.0422 a 15.9155 15.9155 0 0 1 -3.7288 16.6195 l -10.0609 -8.6617 z" fill="#FF9800"></path>
                  <!-- 数据处理 20% -->
                  <path d="M28.0609 26.6617 a 15.9155 15.9155 0 0 1 -16.1218 3.2956 l 6.0609 -11.9573 z" fill="#FFA726"></path>
                  <!-- 其他 20% -->
                  <path d="M11.9391 29.9573 a 15.9155 15.9155 0 0 1 -9.8546 -11.9151 a 15.9155 15.9155 0 0 1 5.9155 -15.8577 l 10 15.9155 z" fill="#FFCC80"></path>
                </svg>
                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
                  <p class="text-xs text-gray-500">总数</p>
                  <p class="text-xl font-bold text-gray-800">342</p>
                </div>
              </div>
            </div>
            
            <div class="space-y-2">
              <div 
                v-for="category in pluginCategories" 
                :key="category.name"
                class="flex items-center justify-between"
              >
                <div class="flex items-center">
                  <div class="w-3 h-3 rounded-sm mr-2" :style="{ backgroundColor: category.color }"></div>
                  <span class="text-xs text-gray-600">{{ category.name }}</span>
                </div>
                <div class="text-xs font-medium">{{ category.count }} ({{ category.percent }}%)</div>
              </div>
            </div>
          </div>
          
          <!-- 右侧统计数据 -->
          <div>
            <div class="p-5 rounded-lg border border-gray-200 bg-purple-50 shadow-sm mb-6">
              <h3 class="text-sm font-medium text-gray-600 mb-4">插件增长趋势</h3>
              
              <div class="h-32">
                <canvas id="pluginGrowthChart"></canvas>
              </div>
              
              <div class="flex justify-between mt-2 text-xs text-gray-500">
                <span>Q1</span>
                <span>Q2</span>
                <span>Q3</span>
                <span>Q4</span>
                <span>Q1</span>
                <span>Q2</span>
              </div>
            </div>
            
            <div class="grid grid-cols-2 gap-4">
              <div class="p-4 rounded-lg border border-gray-200 bg-red-50 shadow-sm text-center">
                <p class="text-xs text-gray-500">本月新增</p>
                <p class="text-xl font-bold text-gray-800">24</p>
                <p class="text-xs text-green-500"><i class="fas fa-arrow-up mr-1"></i>12%</p>
              </div>
              <div class="p-4 rounded-lg border border-gray-200 bg-orange-50 shadow-sm text-center">
                <p class="text-xs text-gray-500">平均评分</p>
                <p class="text-xl font-bold text-gray-800">4.7</p>
                <div class="flex justify-center mt-1 text-amber-400 text-xs">
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star"></i>
                  <i class="fas fa-star-half-alt"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.text-amber-500 {
  color: #f59e0b;
}
.bg-amber-100 {
  background-color: #fef3c7;
}
.bg-blue-50 {
  background-color: #f2f7fc;
}
.bg-yellow-50 {
  background-color: #fffbeb;
}
.bg-green-50 {
  background-color: #f0fdf4;
}
.bg-purple-50 {
  background-color: #f5f3ff;
}
.bg-red-50 {
  background-color: #fef2f2;
}
.bg-orange-50 {
  background-color: #fff7ed;
}
</style> 